<template>
    <div>
        <div class="title flex al juct">热点资讯 一手掌握</div>

        <div class="information">
            <div class="information-left">
                <div class="information-left-title">
                    <h3>
                        <i></i>
                        考生关注
                    </h3>
                    <div class="information-left-title-tab">
                        <span @click="index = 1" :class="{active:index ===1?true:false}">考试动态</span>
                        <span @click="index = 2" :class="{active:index ===2?true:false}">雅思备考</span>
                        <span @click="index = 3" :class="{active:index ===3?true:false}">托福备考</span>
                        <span @click="index = 4" :class="{active:index ===4?true:false}">热点解析</span>
                    </div>
                </div>

                <div v-show="index === 1" class="information-left-con">
                    <div class="information-left-con1">
                        <div v-for="(item,index) in kaoshi" :key="index">
                            <div>{{item.content}}</div>
                            <div>{{item.title}}</div>
                        </div>

                    </div>
                    <div class="information-left-con2">
                        <ul>
                            <li>
                                <div>动态</div><a href="">AP报考倒计时两天！手把手教你报名考试</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">看过来！2019年托福考试时间表公布啦！</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019-2020年SAT考试时间(国际地区)</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019年雅思考试报名截止日期、准考证打印日期和成绩单寄送日期</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019前三月雅思考试时间</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">游学-游学的意义-游学和留学的区别</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">一位教雅思阅读老师的心路：我也是需要改变的</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">雅思和托福考试的区别</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">留学为什么要参加PTE考试？与雅思相比有啥优势？</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2018不能错过的托福/雅思/ACT/SAT考试新变化</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div v-show="index === 2" class="information-left-con" style="display: none">
                    <div class="information-left-con1">
                       <div v-for="(item,index) in beikao" :key="index">
                           <div>{{item.content}}</div>
                           <div>{{item.title}}</div>
                       </div>
                    </div>
                    <div class="information-left-con2">
                        <ul>
                            <li>
                                <div>动态</div><a href="">AP报考倒计时两天！手把手教你报名考试</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">看过来！2019年托福考试时间表公布啦！</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019-2020年SAT考试时间(国际地区)</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019年雅思考试报名截止日期、准考证打印日期和成绩单寄送日期</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019前三月雅思考试时间</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">游学-游学的意义-游学和留学的区别</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">一位教雅思阅读老师的心路：我也是需要改变的</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">雅思和托福考试的区别</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">留学为什么要参加PTE考试？与雅思相比有啥优势？</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2018不能错过的托福/雅思/ACT/SAT考试新变化</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div v-show="index === 3" class="information-left-con" style="display: none">
                    <div class="information-left-con1">
                        <div v-for="(item,index) in beikao2" :key="index">
                            <div>{{item.content}}</div>
                            <div>{{item.title}}</div>
                        </div>
                    </div>
                    <div class="information-left-con2">
                        <ul>
                            <li>
                                <div>动态</div><a href="">AP报考倒计时两天！手把手教你报名考试</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">看过来！2019年托福考试时间表公布啦！</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019-2020年SAT考试时间(国际地区)</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019年雅思考试报名截止日期、准考证打印日期和成绩单寄送日期</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019前三月雅思考试时间</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">游学-游学的意义-游学和留学的区别</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">一位教雅思阅读老师的心路：我也是需要改变的</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">雅思和托福考试的区别</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">留学为什么要参加PTE考试？与雅思相比有啥优势？</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2018不能错过的托福/雅思/ACT/SAT考试新变化</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div v-show="index === 4" class="information-left-con" style="display: none">
                    <div class="information-left-con1">
                        <div v-for="(item,index) in jiexi" :key="index">
                            <div>{{item.content}}</div>
                            <div>{{item.title}}</div>
                        </div>
                    </div>
                    <div class="information-left-con2">
                        <ul>
                            <li>
                                <div>动态</div><a href="">AP报考倒计时两天！手把手教你报名考试</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">看过来！2019年托福考试时间表公布啦！</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019-2020年SAT考试时间(国际地区)</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019年雅思考试报名截止日期、准考证打印日期和成绩单寄送日期</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2019前三月雅思考试时间</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">游学-游学的意义-游学和留学的区别</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">一位教雅思阅读老师的心路：我也是需要改变的</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">雅思和托福考试的区别</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">留学为什么要参加PTE考试？与雅思相比有啥优势？</a>
                            </li>
                            <li>
                                <div>动态</div><a href="">2018不能错过的托福/雅思/ACT/SAT考试新变化</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="information-right">
                <div class="information-right-title">
                    <h3><i></i> 机经下载</h3>
                    <a href="">更多>></a>
                </div>
                <ul>
                    <li v-for="(item,index) in articlelist" :key="index">
                        <span>{{item.creator}}</span>
                        <a href="">{{item.title}}</a>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "hotNews",
        data(){
            return{
                articlelist:[],
                beikao:[],
                beikao2:[],
                jiexi:[],
                kaoshi:[],
                index:1
            }
        },
        created() {
            this.$axios.get('art/articlelist?sectionid=2&pageSize=5')
                .then(res=>{
                        this.kaoshi = res.data;
                        /* eslint-disable */

                        console.log(res);

                        /* eslint-enable */

                    }
                );
            this.$axios.get('art/articlelist?sectionid=3&pageSize=5')
                .then(res=>{
                        this.beikao = res.data;
                        /* eslint-disable */

                        console.log(res);

                        /* eslint-enable */

                    }
                );
            this.$axios.get('art/articlelist?sectionid=4&pageSize=5')
                .then(res=>{
                        this.beikao2 = res.data;
                        /* eslint-disable */

                        console.log(res);

                        /* eslint-enable */

                    }
                );
            this.$axios.get('art/articlelist?sectionid=5&pageSize=5')
                .then(res=>{
                        this.jiexi = res.data;
                        /* eslint-disable */

                        console.log(res);

                        /* eslint-enable */

                    }
                );
            this.$axios.get('art/articlelist?sectionid=1&pageSize=5')
                .then(res=>{
                        this.articlelist = res.data;
                        /* eslint-disable */

                        console.log(res);

                        /* eslint-enable */

                    }
                )
        }
    }
</script>

<style scoped>

</style>